<template>
  <div class="w-[180px] h-[40px] bg-menuItemBackBg bg-no-repeat bg-[length:100%_100%] mr-[-34px]">
    <!-- transitionName=''是为了去除a-dropdown组件的动画效果,因为动效效果作用在transfrom属性上，而scale也是transfrom，会导致下拉菜单，先是原始大小，停顿一下之后，再缩小，为了避免这种现象，因此去除了动画效果 -->
    <a-dropdown overlayClassName="autoScaleView" :transitionName="''" :disabled="!hasChildren">
      <div
        class="w-[176px] h-[36px] bg-menuItemFrontBg bg-no-repeat bg-[length:100%_100%] flex justify-center items-center relative"
      >
        <div class="font-family-YouSheBiaoTiHei text-[24px] leading-[31px] h-[31px] text-[#CEE3F5]">
          {{ title }}
        </div>
        <div class="w-[16px] h-[16px] flex justify-center items-center" v-if="hasChildren">
          <div class="arrow-down"></div>
        </div>
      </div>
      <template #overlay>
        <a-menu v-if="hasChildren">
          <a-menu-item v-for="(item, idx) of children" :key="idx">
            <a target="_blank" rel="noopener noreferrer" :href="item.path">
              {{ item.title }}
            </a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
  <!-- // ! hello -->
  <!-- // ? hello -->
  <!-- // * hello -->
  <!-- // TODO hello -->
  <!-- // // hello -->
</template>

<script setup lang="ts">
import type { MenuItemInfo } from './typing'

const props = defineProps<MenuItemInfo>()
// ! hello
// ? hello
// * hello
// TODO hello
// // hello
const { children } = toRefs(props)
const hasChildren = computed(() => {
  return children.value && children.value.length > 0
})
</script>

<style scoped lang="less">
.arrow-down {
  width: 7px;
  height: 7px;
  background: linear-gradient(
    45deg,
    rgba(144, 182, 216, 1),
    rgba(144, 182, 216, 1) 50%,
    transparent 50%,
    transparent 100%
  );
  transform: rotate(-45deg) translate3d(2px, -50%, 0);
}
</style>
